<template>
  <div class="container">
    <a-modal v-model:visible="visible" :width="1300" draggable :footer="false" @close="resetFields">
      <template #title>
        {{ formData?.id ? '编辑车辆限制' : '新增车辆限制' }}
      </template>
      <a-form ref="formRef" layout="vertical" :model="formData">
        <a-space direction="vertical" :size="16">
          <a-card class="general-card">
            <template #title> 必填信息 </template>
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item label="停车场id" field="carParkId" disabled>
                  <a-input v-model="formData.carParkId" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="收费模式" field="billingModel" required>
                  <a-select v-model="formData.billingModel" placeholder="请选择" allow-clear>
                    <a-option value="dynamic_time">动态时间计费</a-option>
                    <a-option value="fixed_time">固定时长计费</a-option>
                    <a-option value="dynamic_fixed_time">动态时间按段时长计费</a-option>
                    <a-option value="dynamic_time_upper_limit">每天指定最高费用</a-option>
                    <a-option value="static_time_upper_limit">限时指定最高费用</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车辆类型" field="carTypeKey" disabled>
                  <a-select v-model="formData.carTypeKey" placeholder="请选择">
                    <a-option :value="item.flagKey" v-for="item in carTypeList" :key="item.id">{{ item.name }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="单位时长(分钟)"
                  field="unitDuration"
                  validate-trigger="input"
                  required
                  tooltip="以多少分钟未一个收费梯度，例如你填了60就按每个小时收费，你填了30表示按每小时进行收费，其它以此类推"
                >
                  <a-input
                    v-model="formData.unitDuration"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="费用上限"
                  field="feeUpperLimit"
                  required
                  tooltip="必须填写，不能填0，例如每天或者每24小时最高收费是多少"
                >
                  <a-input
                    v-model="formData.feeUpperLimit"
                    placeholder="不要填0"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card class="general-card">
            <template #title> 选填信息 </template>
            <a-row :gutter="80">
              <a-col :span="4">
                <a-form-item label="自动开闸(入场)" field="autoOpenDoor">
                  <a-select placeholder="请选择" allow-clear v-model="formData.autoOpenDoor">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="是否禁止入场" field="forbidIn">
                  <a-select placeholder="请选择" allow-clear v-model="formData.forbidIn">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="是否禁止出场" field="forbidOut">
                  <a-select placeholder="请选择" allow-clear v-model="formData.forbidOut">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="免费放行(出场)" field="freeRelease">
                  <a-select placeholder="请选择" allow-clear v-model="formData.freeRelease">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="赠送免停时间" field="giveFreeTime">
                  <a-select placeholder="请选择" allow-clear v-model="formData.giveFreeTime">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="无入场自动放行"
                  field="abnormalAutoRelease"
                >
                  <a-select
                    v-model="formData.abnormalAutoRelease"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="免停时间(分钟)" field="freeTime">
                  <a-input v-model="formData.freeTime" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="离场限制(分钟)" field="leaveTimeLimit">
                  <a-input v-model="formData.leaveTimeLimit" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="时间上限" field="upperLimitTime">
                  <a-input v-model="formData.upperLimitTime" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="起步价" field="startingPrice">
                  <a-input v-model="formData.startingPrice" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="起步价模式"
                  field="startingPriceMode"
                  validate-trigger="input"
                >
                  <a-select placeholder="请选择" allow-clear v-model="formData.startingPriceMode">
                    <a-option :value="0">每次都收</a-option>
                    <a-option :value="1">提前缴费只收一次</a-option>
                    <a-option :value="2">每个周期都收</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                    label="起步时长(分钟)"
                    field="startingPriceTime"
                    validate-trigger="input"
                    tooltip="不设置，则使用单位时间，例如设置了120，表示2小时内只收起步价"
                >
                  <a-input
                      v-model="formData.startingPriceTime"
                      placeholder="请输入"
                      allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="禁止通行通道" field="forbidPassCheckPointIds">
                  <a-select placeholder="请选择" allow-clear multiple v-model="formData.forbidPassCheckPointIds"
                    :disabled="!pointList.length">
                    <a-option :value="item.id" v-for="item in pointList" :key="item.id">{{ item.areaName + ' - ' +
                      item.name }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="设置为模板"
                  field="template"
                  validate-trigger="input"
                >
                  <a-select placeholder="请选择" allow-clear v-model="formData.template">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="追缴期限(天)" field="recoveryDeadline">
                  <a-input v-model="formData.recoveryDeadline" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="过期变临停(天)" field="expireToTemporaryLimit" tooltip="如果月卡车过期了，过期N天后变为临停车">
                  <a-input v-model="formData.expireToTemporaryLimit" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="时间控制" field="timeControl" tooltip="例如 规定 什么时间段 什么车辆能通行或者禁止通行">
                  <a-select placeholder="请选择" allow-clear v-model="formData.timeControl">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="车位满禁入" field="limitParkingSpaceNumber" tooltip="例如 车位满后禁止入场">
                  <a-select placeholder="请选择" allow-clear v-model="formData.limitParkingSpaceNumber">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="覆盖历史未付账单" field="overrideHistoryNotPayOrder" tooltip="覆盖历史未支付账单，车辆入场时，监测其在该场内是否有历史未结束记录和订单，如果有，将其结束掉">
                  <a-select placeholder="请选择" allow-clear v-model="formData.overrideHistoryNotPayOrder">
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
        <div class="actions">
          <a-space>
            <a-button @click="resetFields"> 重置 </a-button>
            <a-button type="primary" :loading="loading" @click="onSubmitClick">
              保存
            </a-button>
          </a-space>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getCarTypeListByQuery, cfCheckPointGet } from '@/api/park';
import { cfCarParkSearch, updateCarParkCarLimit, addCarParkCarLimit } from '@/api/internetOfThings';
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const emit = defineEmits(['fetchData', 'fetch-data']);
const formData = ref({
  autoOpenDoor: 1,
  billingModel: '',
  carParkId: '',
  carTypeKey: '',
  feeUpperLimit: '',
  forbidIn: 0,
  forbidOut: 0,
  freeRelease: 0,
  freeTime: 30,
  giveFreeTime: 0,
  timeControl: 0,
  limitParkingSpaceNumber: 0,
  overrideHistoryNotPayOrder: 0,
  abnormalAutoRelease: 1,
  leaveTimeLimit: 15,
  upperLimitTime: '',
  startingPrice: 0,
  startingPriceMode: 0,
  forbidPassCheckPointIds: [],
  id: '',
  template: 0,
  unitDuration: 60,
  startingPriceTime: 0,
  recoveryDeadline: 365,
  expireToTemporaryLimit: 60,
});
const carTypeList = ref([]);
const parkList = ref([]);
const selectLoading = ref(false);

const isEdit = ref(false);
const pointList = ref([]);
const parkingId = ref('');
const parkingNmae = ref('');
const flagKey = ref('');

const handleClick = (_parkingId: any = null, _parkingNmae: any = null, _flagKey: any) => {
  parkingId.value = _parkingId;
  parkingNmae.value = _parkingNmae;
  flagKey.value = _flagKey;
  resetFields();
  formData.value.id = '';
  formData.value.carParkId = parkingId.value;
  formData.value.carTypeKey = flagKey.value;

  getCarType();
  visible.value = true;
};

const handleEdit = (row: any = null) => {

  formData.value = cloneDeep(row);
  // @ts-ignore
  formData.value.freeTime = row.freeTime/60000;
  formData.value.recoveryDeadline = row.recoveryDeadline/86400000;
  formData.value.expireToTemporaryLimit = row.expireToTemporaryLimit/86400000;
  // @ts-ignore
  formData.value.leaveTimeLimit = row.leaveTimeLimit/60000;
  // @ts-ignore
  formData.value.unitDuration = row.unitDuration/60000;
  formData.value.startingPriceTime = row.startingPriceTime/60000;
  getCarType();
  visible.value = true;
};

// 获取通道
const getAccess = async (id: any) => {
  const { data, code, total } = await cfCheckPointGet({
    params: {
      areaId: id,
      scene: 1,
      page: 1,
      size: 200,
    },
  });
  if (code == 10002) {
    pointList.value = data;
  } else {
    pointList.value = [];
  }
};
const resetFields = () => {
  pointList.value = []
  formRef.value.resetFields();
};
const getCarType = async () => {
  const { data, code, message } = await getCarTypeListByQuery({
    params: {
      page: 1,
      size: 200,
    },
  });
  if (code === 10002) {
    carTypeList.value = data;
  } else {
    // @ts-ignore
    // Message.error(message);
  }
};
const handleSelectSearch = async (value: any) => {
  if (value) {
    selectLoading.value = true;
    const { data, code } = await cfCarParkSearch({
      params: {
        name: value,
        page: 1,
        size: 200,
      },
    });
    selectLoading.value = false;
    if (code === 10002) {
      parkList.value = data;
    } else {
      parkList.value = [];
    }
  } else {
    parkList.value = [];
  }
};
const onSubmitClick = () => {
  // eslint-disable-next-line consistent-return
  formRef.value.validate(async (valid: any) => {
    if (valid) return false;
    let newFormData = cloneDeep(formData.value);
    // @ts-ignore
    newFormData.freeTime = formData.value.freeTime * 60000;
    newFormData.recoveryDeadline = formData.value.recoveryDeadline * 86400000;
    newFormData.expireToTemporaryLimit = formData.value.expireToTemporaryLimit * 86400000;
    // @ts-ignore
    newFormData.leaveTimeLimit = formData.value.leaveTimeLimit * 60000;
    // @ts-ignore
    newFormData.unitDuration = formData.value.unitDuration * 60000;
    newFormData.startingPriceTime = formData.value.startingPriceTime * 60000;
    // @ts-ignore
    if(newFormData.forbidPassCheckPointIds){
    // @ts-ignore
      newFormData.forbidPassCheckPointIds = formData.value.forbidPassCheckPointIds.filter(str => str.trim() !== "").join(",")
    }
    // @ts-ignore
    if (formData.value.id) {
      const { code } = await updateCarParkCarLimit(newFormData);
      if (code === 10002) {
        formRef.value.resetFields();
        visible.value = false;
        Message.success('更新成功!');
        emit('fetchData');
      }
    } else {
      const { code } = await addCarParkCarLimit(newFormData);
      if (code === 10002) {
        formRef.value.resetFields();
        visible.value = false;
        Message.success('添加成功!');
        emit('fetchData');
      }
    }
  });
};

defineExpose({ handleClick, handleEdit });
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  overflow: hidden;
}

.actions {
  height: 60px;
  padding: 14px 20px 14px 0;
  background: var(--color-bg-2);
  text-align: right;
}
</style>
